<template>
	<view class="e-badge">
		<slot />
		<view v-if="props.show && ((Number(props.value) === 0 ? props.showZero : true) || props.isDot)"
			:class="badgeClass" :style="[addStyle(customStyle), badgeStyle]" class="e-badge__content">
			<text class="e-badge__content__text" v-if="!props.isDot">{{ showValue }}</text>
		</view>

	</view>

</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	/**
	 * badge 徽标数
	 * @description 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
	 * @tutorial https://uviewui.com/components/badge.html
	 *
	 * @property {Boolean} 			isDot 		是否显示圆点 （默认 false ）
	 * @property {String | Number} 	value 		显示的内容
	 * @property {Boolean} 			show 		是否显示 （默认 true ）
	 * @property {String | Number} 	max 		最大值，超过最大值会显示 '{max}+'  （默认999）
	 * @property {String} 			type 		主题类型，error|warning|success|primary （默认 'error' ）
	 * @property {Boolean} 			showZero	当数值为 0 时，是否展示 Badge （默认 false ）
	 * @property {String} 			bgColor 	背景颜色，优先级比type高，如设置，type参数会失效
	 * @property {String} 			color 		字体颜色 （默认 '#ffffff' ）
	 * @property {String} 			shape 		徽标形状，circle-四角均为圆角，horn-左下角为直角 （默认 'circle' ）
	 * @property {String} 			numberType	设置数字的显示方式，overflow|ellipsis|limit  （默认 'overflow' ）
	 * @property {Array}} 			offset		设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
	 * @property {Boolean} 			inverted	是否反转背景和字体颜色（默认 false ）
	 * @property {Boolean} 			absolute	是否绝对定位（默认 false ）
	 * @property {Object}			customStyle	定义需要用到的外部样式
	 * @example <e-badge :type="type" :count="count"></e-badge>
	 */
	export default defineComponent({
		name: "e-badge",
		mixins: [mpMixin],
	})
</script>
<script lang="ts" setup>
	import {
		computed,
		toRefs
	} from 'vue'
	import {
		badgeProps
	} from './props';
	import {
		useNamespace,
		useDefaultProps
	} from '../../libs/hooks'
	import {
		addUnit,
		addStyle
	} from "../../libs/utils/_utils";
	import type {
		StyleProperties
	} from "../../libs/tokens";
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";

	const {
		badge: badgeDefaultProps
	} = toRefs(componentsProps);

	const _props = defineProps(badgeProps)

	const props = useDefaultProps < DefaultProps['badge'] > (_props, badgeDefaultProps);

	const {
		is
	} = useNamespace('badge')

	const badgeClass = computed(() => {

		return [is('dot', props.value.isDot), is('inverted', props.value.inverted), is('horn', props.value
			.shape === 'horn'), `e-badge--${props.value.type}${props.value.inverted ? '--inverted' : ''}`];
	})
	// 整个组件的样式
	const badgeStyle = computed(() => {
		const style: StyleProperties = {}
		if (props.value.color) {
			style.color = props.value.color
		}
		if (props.value.bgColor && !props.value.inverted) {
			style.backgroundColor = props.value.bgColor
		}
		if (props.value.absolute) {
			style.position = 'absolute'
			style.transform = 'translateY(-50%) translateX(100%)'
			// 如果有设置offset参数
			if (props.value.offset.length) {
				// top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
				const top = props.value.offset[0]
				const right = props.value.offset[1] || top
				style.top = addUnit(top)
				style.right = addUnit(right)
			}
		}
		return style
	})
	const showValue = computed(() => {
		switch (props.value.numberType) {
			case "overflow":
				return Number(props.value.value) > Number(props.value.max) ? props.value.max + "+" : props.value
					.value
			case "ellipsis":
				return Number(props.value.value) > Number(props.value.max) ? "..." : props.value.value
			case "limit":
				return Number(props.value.value) > 999 ? Number(props.value.value) >= 9999 ?
					Math.floor(Number(props.value.value) / 1e4 * 100) / 100 + "w" : Math.floor(Number(props.value.value) /
						1e3 * 100) / 100 + "k" : props.value.value
			default:
				return Number(props.value.value)
		}
	})
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/badge.scss";
</style>
